<template>
  <div style="padding: 6px;min-height: 500px">
    <div style="text-align: center;margin-bottom: 8px;">
      <h2 style="margin: 0; padding: 8px 0">{{xmObj.xmname}}&nbsp;&nbsp;<span style="color: #409eff;cursor: pointer;font-size: 15px;" @click="openPj(xmObj.id)">匿名评论</span></h2>
      <span style="color: #999999;">{{xmObj.xmdesc}}</span>
    </div>
    <el-row :gutter="16">
      <el-col :span="8" v-for="(item,index) in gysObj.list" :key="item.id">
        <el-card class="box-card" style="position: relative">
          <div slot="header" class="clearfix">
            <span style="font-size: 18px;font-weight: bold">{{item.name}}</span>
          </div>
          <div style="height: 30vh;overflow-y: auto;">
            <div class="divnr">供应商描述：{{item.descption}}</div>
            <div class="divnr" style="color: #ff430d">私有化报价：{{item.jiage}}</div>
            <div class="divnr" style="color: #ff430d">公有云报价：{{item.jiagenet}}</div>
            <el-divider content-position="left">服务明细</el-divider>
            <div style="padding: 0 6px 0 16px" v-html="item.fuwudesc"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-drawer title="匿名评论" :visible.sync="xmpjVisible" direction="rtl" :wrapperClosable="true" size="45%">
      <xiangmupj v-if="xmpjVisible" :visible.sync="xmpjVisible" :xmId="popupXmId"></xiangmupj>
    </el-drawer>
  </div>
</template>

<script>
import request from "@/utils/request";
import xiangmupj from "@/views/xiangmu/xiangmupj";
export default {
  components : {xiangmupj},
  props:{
    xmId : {type : Number, default: 0}
  },
  data() {
    return {
      sd: {
        xmId:this.xmId,
        pageNum: 1,
        pageSize: 12
      },
      gysObj: {},
      xmObj: {
        id : 0,
        xmname: '',
        xmdesc: '',
      },
      xmpjVisible : false,
      popupXmId : 0,
    }
  },
  mounted() {
    if(this.xmId){
      this.loadXm();
      this.loadGys()
    }
  },
  methods: {
    loadXm(){
      request({ url: '/xiangmu/getxiangmu', data: {id : this.xmId} }).then( res =>{
        this.xmObj = res.data
      })
    },
    loadGys() {
      request({
        url: '/gys/pagegys',
        data: this.sd
      }).then(res => {
        const { data } = res
        this.gysObj = data
      })
    },
    openPj(xmId){
      this.xmpjVisible = true;
      this.popupXmId = xmId;
    },
  }
}
</script>

<style lang="scss" scoped>
div.divnr{
  text-indent: 16px;
  font-size: 14px;
  color: #666666;
  line-height: 30px;
}
</style>
